footer {
  margin-top: 1em;
  background: $color-footer;
  padding: 0 2% 0.5em;
}

#footer {
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  .line {
    width: 100%;
    height: 10em;
    margin: 0 auto;
    @media ($mini) {
      width: 10em;
      float: left;
      position: relative;
    }
    span {
      display: block;
      width: 0.5em;
      height: 6.25em;
      border-right: 0.125em solid $color-white;
      margin: 0 auto;
      @media ($mini) {
        position: absolute;
        left: 3em;
        margin: 0 0 1.5em;
      }
    }
  }
}

.author {
  $width: 6.25em;
  width: $width;
  height: $width;
  margin: 0 auto;
  background: no-repeat url($author-img) left top;
  background-size: $width $width;
  border-radius: ($width/2);
  transition: transform 2s ease-out;
  &:hover {
    transform: rotateZ(360deg);
  }
  @media ($mini) {
    position: absolute;
    top: 2em;
    margin: 0 0 1.5em;
  }
}

.info {
  @if variable-exists('show_custom_font') {
    font-family: $font-custom-family;
    @include font-smoothing();
    font-size: 200%;
    line-height: 1.4;
    opacity: .7;
  }
  @else {
    font-family: $font-default;
    line-height: $line-height+0.15;
  }
  width: 90%;
  margin: 0 auto;
  color: $color-white;
  @media ($mini) {
    margin: 1.5em 0 0em 0;
    float: left;
    width: 75%;
  }
}

.social-font {
  width: 100%;
  margin: 0 auto;
  float: left;
  padding-left: 3%;
  @media ($phone) {
    padding-left: 20%;
  }
  @media ($mini) {
    width: 15em;
    position: absolute;
    right: -2em;
    top: 3em;
  }
  a {
    float: left;
    display: block;
    width: 14%;
    color: $color-white;
    font-size: $font-size+85;
    padding: 0.5em;
    @media ($tablet) {
      padding: 0.3em;
    }
    &:hover:before {
      color: $color-blue;
    }
  }
}

.icon-weibo:before,.icon-github:before,.icon-twitter:before,.icon-facebook:before,.icon-stack-overflow:before,.icon-email:before,.icon-google_plus:before,.icon-linkedin:before {
  font-family: $font-icon-family;
  @include font-smoothing();
}

.icon-weibo:before {
  content: "\f18a";
}
.icon-github:before {
  content: "\f09b";
}
.icon-twitter:before {
 content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-stack-overflow:before {
  content: "\f16c";
}
.icon-email:before {
  content: "\f003";
}
.icon-google_plus:before {
  content: "\f0d5";
}
.icon-linkedin:before {
  content: "\f08c";
}
// .icon-douban:before {
//   font-family: $font-icon-diao;
//   @include font-smoothing();
//   content: "\f111";
// }
// .icon-zhihu:before {
//   font-family: $font-icon-diao;
//   @include font-smoothing();
//   content: "\f142";
// }



.copyright {
  opacity: 0.7;
  font-family: $font-default;
  font-size: 0.7em;
  width: 100%;
  color: $color-white;
  text-align: center;
  @media ($mini) {
    float: left;
  }
  a {
    color: $color-blue;
    &:hover {
      color: $color-blue;
      text-decoration: underline;
    }
  }
  a.report-link {
    display: inline-block;
    text-decoration: none;
    &:hover {
      display: inline-block;
      text-decoration: none;
    }
  }
  .report-img {
    margin-left: 1em;
    display: inline-block;
    height: 20px;
    margin-right: 12px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
  .report-link-text {
    height: 20px;
    line-height: 20px;
    color: #939393;
    margin-left: -7px;
  }
}

.cc-license {
  width: 100%;
  float: left;
  text-align: center;
  .cc-opacity {
    opacity: 0.7;
    border-bottom: none;
    &:hover {
      opacity: 0.9;
    }
  }
  img {
    display: inline-block;
  }
}